<template>
  <div class="pages personDetail">
    <div class="pageLevel">
      <div class="form-content">
        <!-- 操作框 -->
        <div class="operationBox tableSearch">
          <el-button type="primary" @click="goBack" size="mini" v-if="checkAdvInfo">返回</el-button>
          <el-button type="primary" @click="closeAdd" size="mini" v-else>返回</el-button>
        </div>
        <!-- 表单内容 -->
        <el-form :label-position="ruleForm.labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" size="small">
          <div>
            <div class="rowtwo">
              <el-row class="rowtwo-form">
                <el-form-item label="广告标题" prop="title">
                  <el-input show-word-limit type="text" v-model="ruleForm.title" maxlength="16" :disabled="checkAdvInfo"></el-input>
                </el-form-item>

                <el-form-item label="广告位置" prop="position">
                  <el-select :disabled="checkAdvInfo " v-model="ruleForm.position" @change="changetTV" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in positionArray" :key="item.typeId" :value="item.typeId" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row class="rowtwo-img" v-if="ruleForm.position==0">
                <el-form-item prop="imgUrl" label="广告图片" v-if="ruleForm.position=='0'">
                  <div class="uploadTip">上传图片的最佳尺寸像素: 710*288像素，其他尺寸会影响页面效果，格式png，jpeg，jpg，gif</div>
                  <div :class="['imgbox',{'imgbox-v':!ruleForm.imgUrL}]">
                    <img :src="ruleForm.imgUrl" @click="showimg(ruleForm.imgUrl)" alt />
                  </div>
                  <el-upload v-if="!ting" class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile2">
                    <el-button :disabled="checkAdvInfo" class="upload-btn" size="small" type="primary">上传图片</el-button>
                  </el-upload>
                  <el-button size="small" class="delete-img" @click="deleteImg" :disabled="deletShow">删除</el-button>
                </el-form-item>
              </el-row>
              <el-row class="rowtwo-img" v-if="ruleForm.position==2">
                <el-form-item prop="imgUrl" label="上传视频:">
                  <el-upload class="upload-demo" ref="upload" action="1" :before-upload="beforeAvatarTV" :http-request="uploadSectionFileTV" :file-list="fileList" :show-file-list='false'>
                    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                    <el-button size="small" style="margin-left: 20px;" @click="deleteImgtv" :disabled="deletShow">重置</el-button>
                    <div slot="tip" class="el-upload__tip">格式支持:ogg，webm，mp4</div>
                    <video v-if="this.ruleForm.imgUrl !=''" :src="this.ruleForm.imgUrl" class="video-avatar" controls="controls">您的浏览器不支持视频播放</video>
                  </el-upload>
                </el-form-item>
              </el-row>
            </div>
            <el-row v-if="ruleForm.position==0">
              <el-form-item prop='backgroundColor' label="广告背景色" style="width: 450px;display: inline-block">
                <el-input class='input-insert-icon' show-word-limit type="text" maxlength='6' v-model="ruleForm.backgroundColor" placeholder="输入颜色色号，6位，#16进制" :disabled="checkAdvInfo" @keyup.native="replace(ruleForm, 'backgroundColor')">
                  <i slot="prefix">#</i>
                </el-input>
              </el-form-item>
              <div class='bg-look'>
                <el-button type='text' @click='showBg' :disabled='status == 1'>预览</el-button>
                <!-- <div class='bg-diplay' v-if='showBackground && ruleForm.backgroundColor' :style='{"background-color": `#${ruleForm.backgroundColor}`}'></div> -->
              </div>
            </el-row>
            <el-row style="width: 600px">
              <el-form-item label="广告有效期" prop="validityStartTime">
                <el-date-picker v-model="ruleForm.validityStartTime" :disabled="startTimeDisabled || checkAdvInfo" type="datetime" :clearable="clearable" placeholder="选择开始时间" @change="checkEndTime" :picker-options="pickerOptions"></el-date-picker>
                <el-checkbox v-model="ruleForm.onLineLimit" @change="startTimeLimit" :disabled="checkAdvInfo">不限制(即时上架)</el-checkbox>
              </el-form-item>
              <el-form-item prop="validityEndTime">
                <el-date-picker v-model="ruleForm.validityEndTime" :disabled="endTimeDisabled || checkAdvInfo" type="datetime" :clearable="clearable" placeholder="选择结束时间" :picker-options="pickerOptions" @change="checkEndTime"></el-date-picker>
                <el-checkbox v-model="ruleForm.offlineLimit" @change="endTimeLimit" :disabled="checkAdvInfo">不限制(即时下架 )</el-checkbox>
              </el-form-item>
            </el-row>
            <el-row style="width: 600px" v-if="ruleForm.position==0">
              <el-form-item label="广告链接" prop="link">
                <el-button size="small" type="primary" @click="addLink" :disabled="checkAdvInfo">添加链接</el-button>
                <el-input placeholder="选填, 带入所选链接" class="link-input" v-model="showUrl" disabled></el-input>
              </el-form-item>
            </el-row>
            <el-row style="width: 600px" v-if="!checkAdvInfo">
              <el-button size="small" @click="closeAdd">关闭</el-button>
              <el-button size="small" type="primary" @click="release">发布</el-button>
            </el-row>
          </div>
        </el-form>
      </div>
      <!-- 添加链接 -->
      <el-dialog title="添加链接" class="add-link" :visible.sync="dialogTableVisible_o" width="60%" height="500px">
        <el-tabs type="border-card">
          <el-tab-pane label="网址链接">
            <label for>跳转链接</label>
            <el-input v-model="ruleForm.linkUrl" class="link-input" size="small" type="url"></el-input>
            <div class="btnBox">
              <el-button type="primary" size="small" @click="addLinkUrl">确定</el-button>
              <el-button size="small" @click="dialogTableVisible_o = false">取消</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="门店">
            <el-input v-model="searchClassInput" class="link-input" size="small" placeholder="请输入公司名称或编号"></el-input>
            <span>状态: 启用</span>
            <el-button size="small" @click="searchClass">搜索</el-button>
            <template>
              <div>
                <el-table :data="shopList" stripe style="width: 100%" height="310">
                  <el-table-column width="40">
                    <template slot-scope="scope">
                      <el-radio class="radio" v-model="radio" :label="scope.$index" @change.native="readioChange(scope.row)"></el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="shopCode" label="商户编号" width="180"></el-table-column>
                  <el-table-column prop="name" label="门店名称" width="180"></el-table-column>
                  <el-table-column prop="address" label="门店地址" width="200"></el-table-column>
                  <el-table-column prop="principal" label="法人" width="80"></el-table-column>
                  <el-table-column prop label="状态" width="80">启用</el-table-column>
                  <el-table-column prop="openAccount" label="开户状态" :formatter="openAccount"></el-table-column>
                </el-table>
                <div class="pageblock">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="['5','10','15',20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"></el-pagination>
                  <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
                </div>
              </div>
            </template>
            <div class="btnBox">
              <el-button type="primary" size="small" @click="addOnlingCladdUrl">确定</el-button>
              <el-button size="small" @click="dialogTableVisible_o = false">取消</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <el-dialog title="预览" :visible.sync="centerDialogVisible" class="tv-dialog" width="360px">
        <div class="box-tv">
          <img class="img-tv" :src="tv" alt="">
          <img class="img-head" :src="Status" alt="">
          <img class="img-search" :src="search" alt="">
          <div class="back-color" :style='{"background-color": `#${ruleForm.backgroundColor}`}'></div>
          <div class="back-colory" :style='{"background-color": `#${ruleForm.backgroundColor}`}'></div>
          <img class="img-banner" :src="ruleForm.imgUrl" alt="">
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from "@/util";
import tv from "@/assets/images/Iphone.png";
import search from "@/assets/images/search.png";
import Status from "@/assets/images/Status.png";

import templateTwo from "@/assets/images/templateTwo.png";

import s from "@/util/state";
import u from "@/util";
import {
  uploadFile,
  getFile,
  newAdv,
  queryCourse,
  updAdv,
  advInfo,
  uploadFileResultUrl,
  selectBaseShopPageList
} from "@/api";
export default {
  computed: mapState(["merchantId", "path", "power"]),
  components: {},

  data() {
    var checkstartTime = (rule, value, callback) => {
      callback();
    };
    var checkEndTime = (rule, value, callback) => {
      callback();
    };
    return {
      Status: Status,
      search: search,
      tv: tv,
      centerDialogVisible: false,
      fileList: [],
      clearable: false,
      ting: false,
      id: "",
      status: "",
      dialogTableVisible_o: false,
      showBackground: false,
      ruleForm: {
        title: "",
        position: 0,
        imgUrl: "",
        linkUrl: "",
        linkType: "",
        validityStartTime: "",
        validityEndTime: "",
        onLineLimit: false,
        offlineLimit: false,
        backgroundColor: "FFB024"
      },
      startTimeDisabled: false,
      endTimeDisabled: false,
      positionArray: [
        {
          typeId: 0,
          name: "首页轮播图"
        },
        {
          typeId: 2,
          name: "TV视频"
        }
      ],
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 16, message: "长度在 1 到 16 个字符", trigger: "blur" }
        ],
        position: [
          {
            required: true,
            message: "请至少选择一个分类",
            trigger: "change"
          }
        ],
        imgUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
        validityStartTime: [
          {
            // type:'datetime',
            required: true,
            message: "请选择开始日期",
            trigger: "blur"
          },
          {
            tigger: "change",
            validator: checkstartTime
          }
        ],
        validityEndTime: [
          {
            // type:'datetime',
            required: true,
            message: "请选择结束日期",
            trigger: "blur"
          },
          {
            tigger: "change",
            validator: checkEndTime
          }
        ],
        backgroundColor: [
          {
            validator: u.validColor,
            trigger: "blur"
          }
        ]
      },
      inputLink: "",
      radio: "",
      shopList: [],
      selectClass: {},
      searchClassInput: "",
      checkAdvInfo: false,
      currentPage: 1,
      pageSize: 20,
      totalItems: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      showUrl: "",
      deletShow: true
    };
  },
  created() {
    console.log(this.tv);
    console.log(this.templateTwo);
    this.id = u.getQuery("id");
    this.status = u.getQuery("status");
    if (this.id != "") {
      if (this.status == 1) {
        this.checkAdvInfo = true;
        this.deletShow = true;
      }
      advInfo(this.id).then(res => {
        this.ruleForm = res.data;
        if (res.data.linkType == 0) {
          this.showUrl = res.data.linkUrl;
        } else {
          this.showUrl = res.data.courseTitle;
          this.ruleForm.linkUrl = "";
        }
        if (this.status == 2) {
          this.ruleForm.validityStartTime = "";
          this.ruleForm.validityEndTime = "";
        }
      });
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    changetTV() {
      this.deletShow = false;
      this.ruleForm.imgUrl = "";
    },
    //预览呢背景色
    showBg() {
      if (!this.ruleForm.imgUrl) {
        this.$message.error("请上传广告图片");
        return;
      }
      if (
        !this.ruleForm.backgroundColor ||
        this.ruleForm.backgroundColor.length !== 6
      ) {
        this.$message.error("请输入广告背景色(6位，16进制)");
        return;
      }
      this.showBackground = !this.showBackground;
      this.centerDialogVisible = true;
    },
    // courseType: s.courseType,
    // classify: s.courseClassify,
    // classStatus: s.classStatus,
    openAccount: s.openAccount,
    forStartTime(row) {
      let year = u.foryear(parseInt(row.validityStartTime));
      let time = u.fortime(parseInt(row.validityStartTime));
      return year + " " + time;
    },

    forCreatedTime(row) {
      let year = u.foryear(parseInt(row.createTime));
      let time = u.fortime(parseInt(row.createTime));
      return year + " " + time;
    },
    goBack() {
      history.back();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let appId = 1;
          if (this.ruleForm.position == "2") {
            appId = 2;
          }
          let postData = {
            companyId: this.merchantId,
            title: this.ruleForm.title,
            position: this.ruleForm.position,
            imgUrl: this.ruleForm.imgUrl,
            validityStartTime: this.ruleForm.validityStartTime,
            validityEndTime: this.ruleForm.validityEndTime,
            linkType: this.ruleForm.linkType,
            linkUrl: this.ruleForm.linkUrl,
            backgroundColor: this.ruleForm.backgroundColor || "FFB024",
            appId: appId
          };

          if (this.id != "") {
            postData.id = this.id;
            updAdv(postData).then(res => {
              if (res.code == 200) {
                this.$message({
                  showClose: true,
                  message: "编辑成功",
                  type: "success"
                });

                history.back(-1);
                return false;
              }
            });
          } else {
            newAdv(postData).then(res => {
              if (res.code == 200) {
                this.$message({
                  showClose: true,
                  message: "新建成功",
                  type: "success"
                });

                history.back(-1);
                return false;
              }
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: "请检查必填信息",
            type: "error"
          });
          return false;
        }
      });
    },

    // 上传图片之前验证图片格式
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/gif";
      // const isLt2M = file.size / 1024 < 40;
      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
        this.ruleForm.imgUrl = "";
      }
      // if (!isLt2M) {
      //   this.$message.error("上传图片大小不能超过 40kb!");
      // }
      const isSize = new Promise(function(resolve, reject) {
        let width = 710;
        let height = 288;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {},
        () => {
          this.$message.error("上传的图片必须是710px x 288px");
          return Promise.reject();
        }
      );

      return isJPG && isSize;
    },
    beforeAvatarTV(file) {
      console.log(file);
      const isJPG =
        file.type === "video/mp4" ||
        file.type === "video/ogg" ||
        file.type === "audio/ogg" ||
        file.type === "video/webm";
      if (!isJPG) {
        this.$message.error("上传视频格式错误!");
      }
      return isJPG;
    },
    //上传图片
    uploadSectionFile2(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFile(data).then(res => {
        this.ruleForm.imgUrl = `${getFile}?id=${res.data.id}`;
        this.deletShow = false;
      });
    },
    //上传视频
    uploadSectionFileTV(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFileResultUrl(data).then(res => {
        this.ruleForm.imgUrl = res.data.url;
        this.deletShow = false;
      });
    },

    deleteImg() {
      this.$confirm("您确认要删除当前图片么?", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.ruleForm.imgUrl = "";
          this.deletShow = true;
        })
        .catch(() => {});
    },
    deleteImgtv() {
      this.$confirm("您确认要删除当前视频么?", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.ruleForm.imgUrl = "";
          this.deletShow = true;
        })
        .catch(() => {});
    },
    showimg(a) {
      if (!a) {
        return;
      }
      window.open(a);
    },

    startTimeLimit(val) {
      this.startTimeDisabled = val;
      this.ruleForm.validityStartTime = "";
      val == false
        ? (this.rules.validityStartTime[0].required = true)
        : (this.rules.validityStartTime[0].required = false);
    },

    endTimeLimit(val) {
      this.endTimeDisabled = val;
      this.ruleForm.validityEndTime = "";
      val == false
        ? (this.rules.validityEndTime[0].required = true)
        : (this.rules.validityEndTime[0].required = false);
    },

    addLink() {
      this.dialogTableVisible_o = true;
      this.getCourseList("");
    },

    getCourseList(title) {
      let data = {
        businessId: this.merchantId,
        type: 3,
        nameOrCode: "",
        openAccount: "",
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        title: title,
        status: 0
      };
      selectBaseShopPageList(data).then(res => {
        if (res.code === 200) {
          this.shopList = res.data.list;
          this.totalItems = res.data.pageTotal;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    closeAdd() {
      this.$confirm(
        "您确认要离开该页面吗- 您输入的数据可能不会被保存。",
        "确认关闭",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          this.goBack();
        })
        .catch(() => {});
    },

    release() {
      if (!this.ruleForm.title) {
        this.$message({
          message: "请输入标题",
          type: "error"
        });
      } else if (!this.ruleForm.imgUrl) {
        if (this.ruleForm.position == "0") {
           this.$message({
          message: "请上传图片",
          type: "error"
        });
        }else{
           this.$message({
          message: "请上传视频",
          type: "error"
        });
        }
      } else if (
        !this.ruleForm.validityStartTime &&
        !this.ruleForm.onLineLimit
      ) {
        this.$message({
          message: "请选择开始时间, 或者选择即时上架",
          type: "error"
        });
      } else if (
        !this.ruleForm.validityEndTime &&
        !this.ruleForm.offlineLimit
      ) {
        this.$message({
          message: "请选择结束时间, 或者选择即时下架",
          type: "error"
        });
      } else {
        if (this.ruleForm.position == "0") {
          var confirmReleaseText =
            "<dl>" +
            "<dt>确认发布当前编辑的广告内容？</dt>" +
            "<dd>广告发布后，系统将在‘有效期’展示广告内容</dd>" +
            "<dd>轮播广告位每次展示6条广告内容</dd>" +
            "<dd>系统检测到没有在有效期内广告时，该广告位显示默认广告图</dd>" +
            "<dd>同一时间广告数量超出最大显示范围，系统将按发布时间早晚依次展示</dd>" +
            "</dl>";
        } else {
          var confirmReleaseText =
            "<dl>" +
            "<dt>确认发布当前编辑的广告内容？</dt>" +
            "<dd>广告发布后，系统将在‘有效期’展示广告内容</dd>" +
            "<dd>TV广告每次只展示１条视频，系统将按发布时间早晚依次展示</dd>" +
            "<dd>系统检测到没有在有效期内广告时，该广告位显示默认视频</dd>" +
            "</dl>";
        }
        this.$confirm(confirmReleaseText, "确认发布", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true
        })
          .then(() => {
            this.submitForm("ruleForm");
          })
          .catch(() => {});
      }
    },

    checkEndTime() {
      if (!this.ruleForm.validityEndTime) {
        return false;
      }
      if (!this.ruleForm.validityStartTime && !this.startTimeDisabled) {
        this.$message.error("开始日期不能为空");
      }

      if (this.ruleForm.validityEndTime <= this.ruleForm.validityStartTime) {
        this.$message.error("结束时间不能小于等于开始时间");
        this.ruleForm.validityEndTime = "";
      }
    },

    readioChange(row) {
      this.selectClass = row;
    },

    addOnlingCladdUrl() {
      this.ruleForm.linkUrl = this.selectClass.id;
      this.showUrl = this.selectClass.name;
      this.ruleForm.linkType = 1;
      this.dialogTableVisible_o = false;
    },
    addLinkUrl() {
      this.ruleForm.linkType = 0;
      this.showUrl = this.ruleForm.linkUrl;
      this.dialogTableVisible_o = false;
    },

    toPage() {
      this.getCourseList("");
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.radio = "";
      this.getCourseList("");
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.radio = "";
      this.getCourseList("");
    },

    searchClass() {
      this.getCourseList(this.searchClassInput);
    },

    //字符串过滤
    replace(obj, key) {
      let that = this;
      if (!obj[key]) {
        return;
      }
      let event = event || window.event;
      if (event.keyCode == 13) {
        setTimeout(() => {
          that.validItem(obj, key);
        }, 100);
      } else {
        that.validItem(obj, key);
      }
    },
    validItem(obj, key) {
      let res = "";
      switch (key) {
        case "backgroundColor":
          res = u.replaceColor(obj[key]);
          break;
      }
      this.$set(obj, key, res);
    }
  }
};
</script>
<style>
.input-insert-icon .el-input__prefix {
  left: 18px;
  color: #606266;
}
</style>
<style scoped>
.uploadTip {
  font-size: 12px;
  color: #868181;
}
.el-date-editor.el-input {
  margin: 0 20px 20px 0;
}
.link-input {
  width: 70%;
}
.rowtwo .rowtwo-form {
  width: 450px;
}
.imgbox {
  display: inline-block;
  border: 1px dashed #dcdfe6;
}
.imgbox-v {
  width: 200px;
  height: 200px;
}
.imgbox img {
  display: block;
  width: auto;
  height: 200px;
}
.upload-btn {
  width: 100%;
  margin: 10px 0;
}
</style>
<style scope lang='less'>
/* 确认发布的弹窗 */
.el-message-box__message dt {
  font-size: 16px;
}
.el-message-box__message dd {
  font-size: 12px;
}
.el-message-box__message dd::before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  background: #cac7c7;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  margin-right: 10px;
}
/*.item .el*/
.add-link .item .el-input {
  width: 60px;
}
.add-link .line {
  width: 100%;
  height: 1px;
  background: #8c939d;
  margin: 20px 0;
}
.add-link .link-input {
  margin-left: 10px;
}
.delete-img {
  position: absolute;
  bottom: 11px;
  left: 105px;
}
.add-link .el-radio__label {
  display: none;
}
.add-link .el-tabs--border-card > .el-tabs__content {
  height: 425px;
}
.add-link .el-dialog__body {
  padding: 10px 0 0;
}
.add-link .btnBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.add-link .el-table .cell img {
  width: 50%;
}
.add-link .pageblock {
  display: flex;
  justify-content: center;
}
.bg-look {
  display: inline-block;
  margin-left: 20px;
  position: relative;
  .bg-diplay {
    width: 350px;
    height: 180px;
    position: absolute;
    right: -450px;
    border-radius: 5px;
    top: -50px;
    border: 1px solid #dcdfe6;
  }
}
.video-avatar {
  width: 300px;
  height: 200px;
  display: block;
  margin-top: 10px;
}
.box-tv {
  width: 364px;
  height: 740px;
  margin: 0 auto;
  position: relative;
}
.img-tv {
  width: 364px;
  height: 740px;
  position: absolute;
  top: 0;
  left: 0;
}
.back-color {
  width: 325px;
  height: 146px;
  position: absolute;
  left: 21px;
  top: 77px;
  background: #dcdfe6;
  z-index: 1000;
}
.back-colory {
  width: 325px;
  height: 25px;
  position: absolute;
  left: 21px;
  top: 222px;
  z-index: 1000;
  border-radius: 0% 0% 100% 100%;
  border-top: none;
}
.img-head {
  width: 314px;
  height: 12px;
  position: absolute;
  left: 27px;
  top: 81px;
  z-index: 1100;
}
.img-search {
  width: 310px;
  height: 29px;
  position: absolute;
  left: 31px;
  top: 114px;
  z-index: 1100;
}
.img-banner {
  width: 307px;
  height: 127px;
  position: absolute;
  left: 30px;
  top: 155px;
  z-index: 1100;
}
</style>
<style>
.personDetail .el-dialog__body {
  padding: 0px 0px;
}
.tv-dialog .el-dialog__header {
  background: #838383;
  display: none;
}
.tv-dialog .el-dialog {
  border-radius: 52px;
}
</style>

